<template>
  <div class="app-container">
    <el-drawer :title="title" :visible.sync="table" direction="rtl" size="50%">
      <el-card shadow="never">
        <cus-filter-wraper>
          <el-input
            v-model="queryParam.itemText"
            placeholder="请输入名称"
            style="width: 150px; margin-right: 10px"
            clearable
          ></el-input>
          <!--              <el-input v-model="queryParam.status" placeholder="请选择状态" style="width:150px" clearable></el-input>-->
          <el-select
            v-model="queryParam.status"
            placeholder="请选择状态"
            style="width: 150px; margin-right: 10px"
          >
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="searchQuery">
            查询
          </el-button>
          <el-button
            v-has="hasButtons.addbutton"
            type="primary"
            icon="el-icon-plus"
            @click="handleCreateWraper"
          >
            添加
          </el-button>
        </cus-filter-wraper>
        <el-table :data="dataSource" :header-cell-style="headerRowClass">
          <el-table-column
            type="index"
            :index="indexItemMethod"
          ></el-table-column>
          <el-table-column property="itemText" label="名称"></el-table-column>
          <el-table-column
            property="itemValue"
            label="数据值"
          ></el-table-column>
          <el-table-column
            property="description"
            label="描述"
            width="150px"
          ></el-table-column>
          <el-table-column
            v-if="
              global_checkBtnPermission([
                hasButtons.editbutton,
                hasButtons.deletebutton,
              ])
            "
            align="center"
            label="操作"
            width="220px"
          >
            <template slot-scope="scope">
              <el-button
                v-has="hasButtons.editbutton"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                plain
                @click="handleUpdateWraper(scope.row)"
              >
                编辑
              </el-button>
              <cus-del-btn
                v-has="hasButtons.deletebutton"
                @ok="handleDelete(scope.row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="ipagination.total > 0"
          :total="ipagination.total"
          :page.sync="ipagination.page"
          :limit.sync="ipagination.limit"
          @pagination="searchQuery"
        />
      </el-card>
    </el-drawer>

    <!--模态框-->
    <div class="dia">
      <el-dialog
        :visible.sync="dialogVisible"
        width="40%"
        @close="handleDialogClose"
      >
        <template slot="title">
          <div class="titleZise">
            <svg-icon icon-class="my-dict-add" />
            <span>{{ titleMap[dialogStatus] }}</span>
          </div>
        </template>
        <el-form
          ref="dataForm"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item :label="dictItemDesc.itemText" prop="itemText">
            <!--            <el-input v-model="form.roleCode" :disabled="dialogStatus != 'create'"></el-input>-->
            <el-input v-model="form.itemText"></el-input>
          </el-form-item>
          <el-form-item :label="dictItemDesc.itemValue" prop="itemValue">
            <el-input v-model="form.itemValue"></el-input>
          </el-form-item>
          <el-form-item :label="dictItemDesc.description" prop="description">
            <el-input
              v-model="form.description"
              type="textarea"
              :rows="7"
            ></el-input>
          </el-form-item>
          <el-form-item :label="dictItemDesc.sortOrder" prop="sortOrder">
            <el-input
              v-model="form.sortOrder"
              type="number"
              :placeholder="dictItemDesc.sortOrder"
            />
          </el-form-item>
          <el-form-item :label="dictItemDesc.status" prop="status">
            <el-switch v-model="form.status"></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button v-waves @click="dialogVisible = false">取消</el-button>
          <el-button v-waves type="primary" @click="submitFormWraper">
            提交
          </el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { BaseListMixin } from '@/mixins/BaseListMixin'

  const hasButtons = {
    editbutton: 'sys:dictItem:edit',
    addbutton: 'sys:dictItem:add',
    deletebutton: 'sys:dictItem:delete',
  }
  // 常量title
  const dictItemDesc = {
    id: '',
    itemText: '名称',
    itemValue: '数据值',
    description: '描述',
    status: '是否启用',
    sortOrder: '排序',
  }

  export default {
    mixins: [BaseListMixin],
    data() {
      return {
        hasButtons: hasButtons,
        // sss: true,
        title: '字典列表',
        table: false,
        dictItemDesc: dictItemDesc,
        queryParam: {
          dictId: undefined,
          itemText: undefined,
          status: undefined,
        },
        form: {
          id: undefined,
          itemText: undefined,
          itemValue: undefined,
          description: undefined,
          status: true,
        },
        dictId: '',
        rules: {
          itemText: [{ required: true, message: '不能为空', trigger: 'blur' }],
          itemValue: [{ required: true, message: '不能为空', trigger: 'blur' }],
          pwd: [
            { pattern: /^(\w){6,16}$/, message: '请设置6-16位字母、数字组合' },
          ],
        },
        url: {
          listPage: '/presoftasim/system/dictItem/listPage',
          delete: '/presoftasim/system/dictItem/delete',
          create: '/presoftasim/system/dictItem/create',
          update: '/presoftasim/system/dictItem/update',
        },
        titleMap: {
          create: '创建字典数据',
          update: '编辑字典数据',
        },
        disableMixinCreated: true,
      }
    },
    created() {
      // this.getDictItemList();
    },
    methods: {
      indexItemMethod(index) {
        return index + 1
      },
      handleCreateWraper() {
        this.handleCreate()
        this.form.status = true
      },

      submitFormWraper() {
        // this.form.status = this.form.status ? 1 : 0;
        this.form.dictId = this.dictId
        // this.form.modifyTime = undefined;
        // this.form.createTime = undefined;
        this.submitForm(this.form)
      },

      handleUpdateWraper(row) {
        row.status = row.status === 1
        this.handleUpdate(row)
      },

      handleItemEdit(row) {
        this.table = true
        if (row.id) {
          this.dictId = row.id
          this.queryParam.dictId = this.dictId
          // 填充
          // this.form.status = row.status === 1;
        }
        this.loadData(1)
      },
    },
  }
</script>
<style lang="scss" scoped></style>
